<template>
	<div id="addaddress">
		<!---->
		<input class="l" v-model="username" placeholder="收货人真实姓名"/>
		<input class="l"type="text" placeholder="电话" v-model="phone" style="border-bottom:0px"/>
		<group label-width="10em" label-align="left">
			<x-address title="" v-model="value2" raw-value :list="addressData" value-text-align="left" placeholder="请选择地址"></x-address>
		</group>
		<input class="l"type="text" placeholder="详细地址" style="border-bottom: none;margin-bottom:40px;" v-model="address"/>
		
		<div class="conserve" @click="baocun">保存新地址</div>
		<loading :show="show2" :text="text1"></loading>
		<toast type="text" v-model="show3">{{tishi}}</toast>
		
	</div>
</template>

<script>
	import { mapState, mapActions} from 'vuex'
	import { Toast,XAddress,Group,ChinaAddressV4Data,Value2nameFilter as value2name } from 'vux'
	import axios from 'axios'
	export default {
		components: {
			mapState,
	    	mapActions,
	    	Toast,
	    	XAddress,
	    	Group,
		},
		data(){
			return{
				username:'',
				areaid_1:'',
				areaid_2:'',
				areaid_3:'',
				address:'',
				phone:'',
				address_id:'',
				show2:false,
	  			text1:'loading...',
	  			show3:false,
	  			tishi:'',
	  			value2: [],
	  			addressData: ChinaAddressV4Data,
			}
		},
		created(){
			
		},
		methods:{
			baocun(){
				this.getName(this.value2);
				var endValue = this.getName(this.value2);
//				console.log(endValue.length);
				var str = endValue.toString();
				var sheng = str.substring(0,3);
				var shi = str.substring(4,7);
				var qu = str.substring(8,11);
				axios.post(this.url + '/home/Address/addUserAddress',{username:this.username,areaid_1:sheng,areaid_2:shi,areaid_3:qu,address:this.address,phone:this.phone,openid:this.token}).then((res)=>{
					console.log(res);
					this.show3 = true;
					this.tishi = res.data.msg;
					if(res.data.status == 1){
						setTimeout(()=>{
							this.$router.push('/shdz1');
						},2000)
					}
				})
				
			},
			getName(value){
				return value2name(value, ChinaAddressV4Data);
			}
		},
		computed:{
	      ...mapState({
	          token: state => state.Token.userToken()//获取用户Token
	      }),
	    }
	}
</script>

<style>
	body{
		font-size: 16px;
	}
	#addaddress .l{
		width:100%;
		height:40px;
		border:none;
		outline: none;
		text-indent:15px;
		border-bottom: 1px solid #e6e0e0;
		color:#757575;
	}
	#addaddress .weui-cells{
		margin-top:0px;
		border-top:0px;
		padding-top:0px !important;
		padding-bottom:0px !important;
	}
	#addaddress .vux-popup-picker-select span{
		font-size:13px;
		color:#757575;
	}
	#addaddress .vux-cell-placeholder{
		display: inline-block;
		width:100%;
		height:20px;
	}
	#addaddress .weui-cell__hd{
		color:#757575;
		font-size: 13px;
		height:20px;
	}
	#addaddress .s{
		width:88%;
		height:40px;
		border:none;
		outline: none;
		padding-left:15px;
	}
	#addaddress label{
		display: inline-block;
		width:100%;
		height:40px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	#addaddress .conserve{
		width:88%;
		height:44px;
		line-height:44px;
		background: #00C850;
		border-radius: 4px;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0.32px;
		margin:0 auto;
		text-align: center;
	}
	
</style>
